<template>
  <div class="wechatWrapper" @click="handleClick">
    <div class="dragBlock" v-if="!settingStore.fixWindow"></div>
    <LeftBar />
    <div class="contentWrapper">
      <router-view />
    </div>
    <!-- 这里可以放置 teleport 的目标位置 -->
    <div id="overlayTarget"></div>
  </div>
</template>
<script setup lang="ts">
// 导入工具库
import { getCurrentInstance, nextTick, ref, onMounted, onUnmounted, computed } from 'vue'
import useSettingStore from '@/stores/settingStore'
import { ipcRenderer } from '../utils/Electron' 
import { RouterLink } from 'vue-router'
// 导入组件库
import LeftBar from '@/components/LeftBar.vue'

import { PlusOutlined } from '@ant-design/icons-vue'
// 定义属性
const settingStore = useSettingStore()
const { uid } = getCurrentInstance()
const showModal = ref<Boolean>(true)

// 定义方法'
const handleClick = () => {
  PubSub.publish('canncelRightMenu', { componentId: uid })
  PubSub.publish('closeWindowModal', {})
  PubSub.publish('showExtraInfo', {hide: true})
}
// 生命周期
onMounted(() => {
  // 订阅弹窗消息
  PubSub.subscribe('showWindowModal', (msg: string, data: any) => {
    showModal.value = true
  })
})
onUnmounted(()=> {
  PubSub.unsubscribe('showWindowModal')
})
</script>
<style lang="less" scoped>
.wechatWrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  -webkit-app-region: no-drag;
  position: relative;
  box-shadow: 2px 2px 5px #d6d6d6;
  .dragBlock {
    position: fixed;
    -webkit-app-region: drag;
    cursor: all-scroll;
    width: 100%;
    height: 25px;
  }
  .contentWrapper {
    flex: 1;
    display: flex;
    position: relative;
    .leftWrapper {
        width: 375px;
        background-color: hsl(0deg 0% 95%);
        border-right: 1px solid #e3e3e3;
        height: 100%;
      }
      .rightWrapper {
        display: flex;
        flex-direction: column;
        flex: 1;
        background-color: hsl(0deg 0% 97%);
      }
    #overlayTarget {
      position: absolute;

    }
  }
}
</style>
